<template>
  <div class="goods">
    <van-nav-bar
        left-arrow
        @click-left="$router.back()"
        fixed
        :border="false"
        safe-area-inset-top
        style="padding-top: 12px"
        :clickable="false"
    >
      <template #title>
        <form action="/public">
          <van-search
              v-model="search"
              shape="round"
              placeholder="请输入搜索关键词"
              @search="onSearch"
              style="padding-top: 0"
          />
        </form>
      </template>
      <template #right>
        <van-icon name="chat-o" size="18" @click="sorry" style="padding-right: 4vw"/>
        <van-icon name="ellipsis" size="18" @click="showShare = true"/>
      </template>
    </van-nav-bar>
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
    />

    <refresh style="margin-top: 5vh" @onRefreshItem="() => {fresh()}">
      <van-swipe class="goods-swipe" :autoplay="3000" height="400">
        <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
          <van-image :src="thumb" fit="fill" @click="showImagePreview({
  images: goods.thumb,
  closeable: true,
});"/>
        </van-swipe-item>
      </van-swipe>

      <van-cell-group inset>
        <van-cell>
          <template #title>
            <van-row justify="space-between">
              <van-col span="6"><h2 class="goods-price">{{ goods.price }}</h2></van-col>
              <van-col span="13" class="goods-item" style="padding-right: 0 !important;position: relative">
                <div style="margin-block-start: 1.4em;display: inline-block;position: absolute;right: 0">{{
                    goods.payers
                  }}人已付款&nbsp;&nbsp;剩余:{{ goods.remain }}
                </div>
              </van-col>
            </van-row>
            <div class="goods-title">{{ goods.title }}</div>
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group inset>
        <van-cell>
          <template #title>
            <van-image src="/img.png"></van-image>
            <van-row justify="space-around">
              <van-col span="4" class="van-cell-text goods-item">服务</van-col>
              <van-col span="20" class="van-cell-text goods-item">7天无理由退货(全球购除外）次日达 极速退款 假一赔三 逐件查验
                防伪包装
              </van-col>
            </van-row>
          </template>
        </van-cell>
        <van-cell title="线下门店" icon="location-o" is-link @click="sorry"/>
      </van-cell-group>

      <van-cell-group class="goods-cell-group" inset>
        <van-cell title="商品评价" is-link @click="showPopup">
          <template #value>
            <van-rate :value="value" size="15" color="#ffd21e"/>
            <span style="margin-left: 4px">{{ value }}</span>
          </template>
        </van-cell>
        <van-popup
            v-model:show="show"
            closeable
            round
            close-icon="close"
            position="bottom"
            :style="{ height: '30%' }"
        >
          <van-rate v-model="value" allow-half readonly style="top: 50%;left: 35%; position:absolute;" icon="fire"
                    void-icon="fire-o"/>


        </van-popup>
      </van-cell-group>

      <van-cell-group class="goods-cell-group">
        <van-cell size="large" title="商品详情"/>
        <van-cell title="品牌故事"/>
        <van-cell>
          <template #value>
            <div class="left">
              {{ goods.brandStory }}
            </div>
          </template>
        </van-cell>
        <van-cell title="介绍"/>
        <van-cell>
          <template #value>
            <div class="left">
              {{ goods.introduce }}
            </div>
            <van-image v-for="item in goods.thumb" :key="goods.thumb" :src="item"/>
          </template>
        </van-cell>
      </van-cell-group>
    </refresh>

    <van-action-bar>
      <van-action-bar-icon icon="delete-o" @click="del">
        取消收藏
      </van-action-bar-icon>
      <van-action-bar-icon icon="cart-o" @click="onClickCart">
        收藏
      </van-action-bar-icon>
      <van-action-bar-button type="warning" @click="add">
        加入收藏
      </van-action-bar-button>
      <van-action-bar-button type="danger" @click="sorry">
        立即购买
      </van-action-bar-button>
    </van-action-bar>
  </div>
</template>

<script setup>

import {onUpdated, ref} from "vue";
import {showImagePreview, showToast, Toast} from "vant";
import {useRoute, useRouter} from "vue-router";
import {creatCollection, deleteCollection, getProductDetail, getProductImage} from "@/api/shoe.js";
import {getStarListLocal, getUserLocal, setStarListLocal} from "@/utils/auth.js";
import {getAllCollection} from "@/api/user.js";
import Refresh from "@/components/refresh.vue";

const route = useRoute();
const params = defineProps(['id']);
console.log(params.id)
const value = ref(4.5);
const search = ref('');
const goods = ref({
  title: "Air Jordan 1 Retro High OG 复刻男子运动鞋",
  price: 2680,
  payers: "500+",
  remain: 19,
  thumb: [],
  introduce: '',
  brandStory: '',
})
const showShare = ref(false);
const options = ref([
  {name: '微信', icon: 'wechat'},
  {name: '微博', icon: 'weibo'},
  {name: '复制链接', icon: 'link'},
  {name: '分享海报', icon: 'poster'},
  {name: '二维码', icon: 'qrcode'},
])

function onSelect(option) {
  showToast(option.name);
  showShare.value = false;
}

// function formatPrice() {
//   return "¥" + (goods.value.price / 100).toFixed(2);
// }
const router = useRouter();

function onClickCart() {
  router.push("/collection")
}

function del() {
  deleteCollection({uid: getUserLocal().uid, pid: route.params.id}).then(res => {
    if (res.data.code === 0) {
      showToast("取消收藏成功")
      getAllCollection({uid: getUserLocal().uid}).then(result => {
        setStarListLocal(result.data.data)
      })
    } else {
      showToast("未收藏")
    }
  })
}

function sorry() {
  showToast("暂无后续逻辑~");
}

const show = ref(false);
const showPopup = () => {
  show.value = true;
};
getAllCollection({uid: getUserLocal().uid}).then(result => {
  setStarListLocal(result.data.data)
})

function fresh() {
  goods.value.thumb = []
  getProductDetail({pid: route.params.id}).then(res => {
    // console.log(res.data)
    goods.value.title = res.data.data.detail
    goods.value.price = res.data.data.price
    goods.value.introduce = res.data.data.introduce
    goods.value.brandStory = res.data.data.brandStory

  })
  getProductImage({pid: route.params.id}).then(res => {
    console.log(res.data.data)
    for (let i = 0; i < res.data.data.length; i++) {
      goods.value.thumb.push(res.data.data[i].image)
    }
    // goods.value.thumb = res.data.data
  })
}

function add() {
  console.log(getStarListLocal())
  for (let i = 0; i < getStarListLocal().length; i++) {
    if (getStarListLocal()[i].productId == (route.params.id)) {
      showToast("已收藏过");
      return
    }
  }
  creatCollection({pid: route.params.id, uid: getUserLocal().uid}).then(res => {
    console.log(res.data)
  })
  showToast("收藏成功");
}

const onSearch = (val) => {
  router.push({
    name: 'shoeList',
    params: {
      title: val
    },
  })
};

fresh()
onUpdated(() => {
  fresh()
})
</script>

<style lang="less">
//body {
//  font-size: 16px;
//  -webkit-font-smoothing: antialiased;
//}
:root {
  --van-nav-bar-icon-color: #888888;
  --van-nav-bar-text-color: #888888;
  --van-search-padding: 0 var(--van-padding-md);
  --van-cell-background: #fafafa;
}

.goods {
  padding-bottom: 50px;

  &-title {
    font-size: 16px;
  }

  &-item {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }

  &-cell-group {
    margin: 15px 0;
  }
}

.left {
  text-align: left
}
</style>